<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Trajectory</title>
<link type="text/css" href="css/trajectory/style.css" rel="stylesheet" />
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css"
	rel="stylesheet" />
<link rel="stylesheet" type="text/css" media="screen" href="js/jqGrid/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/jqMask/css/jquery.loadmask.css" />
<link rel="stylesheet" media="all" type="text/css" href="js/jqTimepicker/jquery-ui-timepicker-addon.css" />
<link rel="stylesheet" media="all" type="text/css" href="js/jqMultiSelect/jquery.multiselect.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>

<script src="js/jqGrid/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jqGrid/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jqMask/jquery.loadmask.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jqTimepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jqTimepicker/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="js/jqMultiSelect/jquery.multiselect.min.js"></script>

<script type="text/javascript" src="js/Settings.js"></script>
<script type="text/javascript" src="js/adapters/TrajectoryServer.js"></script>
<script type="text/javascript" src="js/Trajectory.js"></script>
<script type="text/javascript" src="js/ResourceService.js"></script>
<script type="text/javascript" src="js/ShopService.js"></script>
<script type="text/javascript" src="js/TrajectoryService.js"></script>
<script type="text/javascript" src="js/RepositoryService.js"></script>



<script type="text/javascript" src="js/plugins/BIServer/plugin.js"></script>



</head>
<body>
<div id="controller">
		<label>Datetime:</label> <input type="text" id="from" placeholder="From"
		class="datetime">-<input type="text" id="to" placeholder="To"
		class="datetime" /> <label>Customer:</label><label id="line_selector"><select >
		</select></label>
		<input type="button" value="Load" id="load"/>
	</div>
<div id="accordion">
	<h3><a href="#">Trajectory</a></h3>
	<div id="trajectory">
		<canvas id="canvas" class="canvas" height="200px">
			Sorry! Your browser doesn't support Canvas. 
		</canvas>
		<div id="toolbar">
			<input type="button" id="start" value="Start" />
			<input type="button" id="stop" value="Stop" /> 
			<input type="button" id="clear" value="Clear" />
		</div>
	</div>
	<h3><a href="#">Trial Information</a></h3>
	<div id="grid">
			<table id="grid_table"></table>
			<div id="paging"></div>
	</div>
	
</div>

<div id="resource_selector">
	<label>Datasource</label>
	<div id="datasource_selector"><select size="5"></select></div>
	<label>Shop</label>
	<div id="shop_selector"><select size="5"></select></div>
</div>


<!-- Templates -->
<script type="text/x-jquery-tmpl" id="template-resources">
            <select id="resources" size="5" required>
                <% _.each(resources, function(resource) { 
					%>
					<option value="<%=resource%>"><%=resource%></option>
                <% }); %>
            </select>
</script>

<script type="text/x-jquery-tmpl" id="template-shops">
            <select id="shops" size="5" required>
                <% _.each(shops, function(shop) { 
					%>
					<option value="<%=shop.shopId%>"><%=shop.shopName%></option>
                <% }); %>
            </select>
</script>

<script type="text/x-jquery-tmpl" id="template-lines">
            <select id="lines" required  multiple="multiple">
                <% _.each(lines, function(line) { 
					%>
					<option value="<%=line%>"><%=line%></option>
                <% }); %>
            </select>
</script>
</body>
</html>
<script type="text/javascript"><!--

	var TrajectoryPlugin = {
		events: _.extend({},Backbone.Events)
	};

	TrajectoryPlugin.events.bind('session:new',initPlugin);

	var gridData = [];
	var trajectoryData = [];


	$("#accordion").accordion({
		collapsible: true,
		autoHeight:false
	});
	$("input[type= button]").button();
	$(".datetime").datetimepicker();
	$("#resource_selector").dialog({
		title:'Select the trajectory Datasource',
		modal:true,
		buttons: {
			"Ok": function() {		
				$(this).dialog("close");			
			}
		},
		beforeClose:function(){
			var db = Settings.datasource;
			var shop = Settings.shop;
			if(db && shop){
				selected();
				return true;
			}else{
				alert("Please select at least one datasource and shop");
				return false;
			} 
		}
	});

	var trajectory = __('canvas' , trajectoryData ).toolbar({
		play:'start',
		stop:'stop',
		clear:'clear'
	});

	$("#grid_table").jqGrid({
      	data: gridData,
      	datatype: "local",
      	height: 'auto',
      	rowNum: 20,
      	rowList: [10,20,30],
         	colNames:['Time','Session ID', 'Line ID', 'SKU','X','Y','Distance' , 'Reader'],
         	colModel:[
         		{name:'time',index:'time', width:150, sorttype:"date", formatter:"date",formatoptions: {newformat: 'Y-m-d h:i:s'}},
         		{name:'sessionId',index:'sessionId', width:100},
         		{name:'lineId',index:'lineId', width:80},
         		{name:'sku',index:'sku', width:80},		
         		{name:'x',index:'x', width:80},		
         		{name:'y',index:'y', width:80},		
         		{name:'distance',index:'distance', width:80},		
         		{name:'readerId',index:'readerId', width:80}		
         	],
         	pager: "#paging",
         	viewrecords: true,
         	
         	grouping:false,
         	groupingView : {
         		groupField : ['time','sessionId'],
         		groupColumnShow : [false , false]
         	},
         	caption: "Trial Information"
      });
	
	$("#load").live("click",loadTrajectory);
	var resourceService = new ResourceService();
	$("#show_grid").live("click",function(){
		$("grid").css("display","none");
	});
	
	var trajectoryService;
	function selected(){
		var shopService = new ShopService({},{datasource:Settings.datasource}).load(Settings.shop);
		trajectoryService = new TrajectoryService({},{datasource:Settings.datasource , shop:Settings.shop});
		trajectoryService.loadLines(function(){
			if(Settings.MODE == "edit"){
				$("#load").trigger("click");
			}
		});
	}
	function loadTrajectory(){
		trajectory.clear();
		$('body').mask("Loading");
		var line = $("#lines").val() || 0;
		var from = $("#from").val() || 0;
		from = from.length <= 0 ? 0 : new Date(from).getTime();
		var to = $("#to").val();
		to = to.length <= 0 ? 0 : new Date(to).getTime();	
		if(Settings.MODE == "view"){
			line = Settings.line;
			from = Settings.from;
			to = Settings.to;
		}	
		trajectoryService.search({trajectory:line,from:from,to:to},createCanvasTrajectory);
	}
	function createCanvasTrajectory(model, response){
		model.clear();
		trajectory.setData(response);
		gridData = [];
		var index = 0;
		for(var i = 0 ; i < response.length ; i ++){
			var children = response[i].children;
			var time = response[i].time;
			for(var j = 0 ; j < children.length ; j ++){
				var item = children[j];
				if(item.sku > 0){
					gridData[index ++] = {time:new Date(time) , lineId:item.lineId , sku:item.sku , x:item.x , y:item.y , distance:item.distance , readerId:item.readerId , sessionId:item.sessionId , isSoldTime:item.isSoldTime};			
				}
			} 
		}
		refreshGrid();
		$('body').unmask();
		puc.allowSave(Settings.MODE == 'view' ? false : true);
	}

	function refreshGrid(){
		$("#grid_table").jqGrid("clearGridData", true);	
		$("#grid_table").jqGrid('setGridParam',
	        { 
	            datatype: 'local',
	            data:gridData
	        }).trigger("reloadGrid");
	}
	TrajectoryPlugin.events.trigger('session:new',{});
	
</script>
